<template>
  <div class="album-wish-wrapper">
    <p>{{ comment }}</p>
    <recommend-list-item
      v-for="(item, idx) in recommend"
      :key="`${item.intro}-${item.title}-${idx}`"
      :item="item"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import EXPERTCOMMENT from '@/assets/quiz/expert-comment'
import RecommendListItem from './RecommendListItem'
export default {
  props: {},
  components: { RecommendListItem },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['user']),
    dateDuration() {
      if (!this.user) return 0
      return this.user.dateDuration
    },
    //获取对应的年龄段问题
    expertComment() {
      const dateDuration = this.dateDuration
      return EXPERTCOMMENT.find((item) => {
        const { min, max, questions } = item
        if (dateDuration < min) return false
        if (dateDuration > max) return false
        return true
      })
    },
    suggestions() {
      if (!this.expertComment) return ''
      return this.expertComment.suggestions
    },
    comment() {
      if (!this.suggestions) return ''
      return this.suggestions.comment
    },
    recommend() {
      if (!this.suggestions) return ''
      return this.suggestions.recommend
    },
  },
  mounted() {},
  filters: {},
  watch: {},
  methods: {},
}
</script>

<style lang="less" scoped>
.album-wish-wrapper {
  width: 100%;
  // background-color: #00ffff;
  // padding: 0 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
  // min-height: 100%;

  & > p:first-of-type {
    margin: 0;
    margin-top: 12px;
    line-height: 80px;
    font-family: 'SourceHanSansCN-Regular';
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 20px;
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.5);
  }
}
</style>
